<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/feedbackList' }">公众监督数据管理</el-breadcrumb-item>
		<el-breadcrumb-item><a href="/">指派网格员</a></el-breadcrumb-item>
	</el-breadcrumb>
	<FeedbackDetail></FeedbackDetail>
	<div class="assign">
		<el-form :model="queryForm" :inline="true" class="demo-form-inline">
			<el-form-item label="是否异地指派">
				<el-switch v-model="isRemote" size="small" inline-prompt active-text="是" inactive-text="否" />
			</el-form-item>
		</el-form>
		<!-- //异地派遣 -->
		<el-form :inline="true" class="demo-form-inline" v-if="isRemote" size="small">
			<el-form-item label="省区域">
				<el-select v-model="queryForm.provinceId" @change="changeProvince" style="width: 100px;">
					<el-option :label="province.provinceName" :value="province.provinceId"
						v-for="province in provinceArr" :key="province.provinceId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="市区域">
				<el-select v-model="queryForm.cityId" @change="changeCity" style="width: 100px;">
					<el-option :label="city.cityName" :value="city.cityId" v-for="city in cityArr"
						:key="city.cityId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="指派给">
				<el-select v-model="gmIdNoLocal" style="width: 100px;">
					<el-option :label="gm.gmName" :value="gm.gmId" v-for="gm in gmArr" :key="gm.gmId"></el-option>
				</el-select>
				<el-form-item>
					<el-popconfirm title="确定要指派吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="assign">
						<template #reference>
							<el-button>异地指派</el-button>
						</template>
					</el-popconfirm>
				</el-form-item>
			</el-form-item>
		</el-form>
		<!-- //本地派遣 -->
		<el-form :inline="true" class="demo-form-inline" v-if="!isRemote" size="small">
			<el-form-item label="指派给">
				<el-select v-model="gmIdLocal" style="width: 100px;">
					<el-option :label="gridMember.gmName" :value="gridMember.gmId"
						v-for="gridMember in gridMemberLocalArr" :key="gridMember.gmId">
					</el-option>
				</el-select>
				<el-form-item>
					<el-popconfirm title="确定要指派吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="assign">
						<template #reference>
							<el-button>本地指派</el-button>
						</template>
					</el-popconfirm>
				</el-form-item>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	import FeedbackDetail from "./FeedbackDetail.vue";
	import {
		inject
	} from 'vue';
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import {
		reactive,
		ref
	} from 'vue';
	const router = useRouter();
	const route = useRoute();
	const provinceArr = ref([]);
	const cityArr = ref([]);
	const axios = inject("axios");
	const myElMessage = inject("elMessage");
	const isRemote = ref(false);
	//本地指派的时候使用的数据
	const gmIdLocal = ref("请选择");
	const gridMemberLocalArr = ref([]);
	//异地指派的时候使用的数据
	const gmIdNoLocal = ref("请选择");
	const gmArr = ref([]);
	const queryForm = reactive({
		provinceId: parseInt(route.query.provinceId),
		cityId: parseInt(route.query.cityId)
	})
	// 省区域
	function provinceAll() {
		let url = "/api/province/findProvinceAll";
		axios.get(url).then((r) => {
			if (r.data.ok) {
				provinceArr.value = r.data.data.province;
				cityAll(queryForm.provinceId)
			}
		})
	}
	//省选择后改变方法
	function changeProvince() {
		cityAll(queryForm.provinceId)
	}
	//城市区域
	function cityAll(provinceId) {
		let url = "/api/province/city?provinceId=" + provinceId;
		axios.get(url).then((r) => {
			if (r.data.ok) {
				cityArr.value = r.data.data.city;
			}
		})
	}
	//市选择后改变方法
	function changeCity() {
		gmAll();
	}
	//网格员区域
	function gmAll(provinceId, cityId) {
		let url = "/api/gridMember/gmAll?provinceId=" + queryForm.provinceId + "&cityId=" + queryForm.cityId;
		axios.get(url).then((r) => {
			if (r.data.ok) {
				if (!isRemote.value) {
					// 本地
					gridMemberLocalArr.value = r.data.data.gridMembers;
				} else {
					//异地
					gmArr.value = r.data.data.gridMembers;
				}
			}
		})
	}

	function assign() {
		if (!isRemote.value) {
			//本地
			if (gmIdLocal.value == "请选择") {
				myElMessage("必须选择一个网格员");
			} else {
				let url = "/api/aqi/setGm?afId=" + route.query.afId + "&gmId=" + gmIdLocal.value;
				axios.get(url).then((response) => {
					let r = response.data;
					if (r.ok) {
						myElMessage(r.msg);
					}
				});
			}
		} else {
			if (gmIdNoLocal.value == "请选择") {
				myElMessage("必须选择一个网格员");
			} else {
				let url = "/api/aqi/setGm?afId=" + route.query.afId + "&gmId=" + gmIdNoLocal.value;
				axios.get(url).then((response) => {
					let r = response.data;
					if (r.ok) {
						myElMessage(r.msg);
					}
				});
			}
		}
	}
	provinceAll();
	gmAll();
</script>

<style scoped>
	.assign {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}
</style>